<template>
	<u-navbar placeholder bgColor="#ECF5FF" autoBack>
		<template #left>
			<view></view>
			<!-- <view class="centerY">
				<image class="city" src="@/static/image/city.png" mode=""></image>
				<view class="font-32 mar-left-10">成都市招商城市主场B座</view>
			</view> -->
		</template>
	</u-navbar>
	<view class="page-box">
		<view class="pad-30">
			<up-swiper @click="hanldeSwiper" interval="1500" v-if="bannerList.length > 0" :display-multiple-items="1"
				height="300rpx" radius="30rpx" :list="bannerList" keyName="cover" indicator indicatorMode="line"
				circular></up-swiper>

			<view class="centerY notice-box mar-top-30" v-if="noticeText">
				<view class="font-28">公告:</view>
				<up-notice-bar class="custom-notice-bar" icon="" bgColor="#E9F1FF" color="#0055FE"
					:text="noticeText"></up-notice-bar>
			</view>
		</view>
		<!-- <view @click="hanldeClick">最新活动入口</view> -->

		<view class="mar-top-50 centerY img-box pad-left-right-20" v-if="homePromote.length > 0">
			<view v-for="item in homePromote" :key="item.id" class="list" @click="hanldeHomeService(item)">
				<view class="image-home">
					<my-image height="148rpx" width="128rpx" :src="item.cover"></my-image>
				</view>
				<view class="font-28 text-center color-646464 mar-top-20">{{item.name}}</view>
			</view>
		</view>
		<view class="mar-top-50">
			<!-- <image class="activity"  src="@/static/image/activity.png" mode=""></image> -->
			<!-- <up-image src="@/static/image/activity.png"></up-image> -->
		</view>

		<view class="mar-top-50" v-if="bannerList2.length > 0">
			<view class="mar-bottom-10 pad-30"  v-for="item in bannerList2" :key="item.id" @click="hanldeHomeJump(item)">
				<my-image height="260rpx" width="690rpx" :src="item.cover"></my-image>
			</view>
		</view>
		

	<!-- 	<view class="pad-30">
			<up-swiper @click="hanldeSwiper2" interval="1500" v-if="bannerList2.length > 0" :display-multiple-items="1"
				height="300rpx" radius="30rpx" :list="bannerList2" keyName="cover" indicator indicatorMode="line"
				circular></up-swiper>
		</view> -->
		<suspend icon="/static/image/service.jpg"></suspend>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { postAllOfGroup, noticeList } from '@/api/currency.js';
	import { getUserCouponAll } from '@/api/index.js';
	import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
	import util from '@/util/share.js'
	import { dataReportFun } from '@/util/dataReport.js';
	
	const hanldeClick = () =>{
		uni.navigateTo({
			url:'/pages/activity/benefit/benefit?activity_id=3'
		})
	}


	// 获取
	const postAllOfGroupFun = async (code) => {
		let res = await postAllOfGroup({
			code
		})
		return res.data.lists;
	}

	// 获取banner
	const bannerList = ref([]);
	const noticeText = ref('');
	const homePromote = ref([]);
	const bannerList2 = ref([]);
	const bannerList3 = ref([]);
	// 获取页面
	const getPageInfo = async () => {
		bannerList.value = await postAllOfGroupFun('home_top_ad');
		homePromote.value = await postAllOfGroupFun('home_promote_b');
		bannerList2.value = await postAllOfGroupFun('home_promote_c');
		// bannerList3.value = await postAllOfGroupFun('home_promote_d');
	}

	noticeList({
		page: 1,
		ps: 1
	}).then(res => {
		if (res?.data?.data?.length > 0) {
			noticeText.value = res?.data?.data[0]?.title;
		}
	})

	// 跳转服务页面
	const hanldeHomeService = (item) => {
		if (item.jump_url) {
			uni.switchTab({
				url: item.jump_url
			})
		} else {
			uni.$u.toast('敬请期待');
		}
	}
	
	const hanldeHomeJump = (item) =>{
		if (item.jump_url) {
			uni.navigateTo({
				url: item.jump_url
			})
		} else {
			uni.$u.toast('敬请期待');
		}
	}

	const hanldeSwiper = (index) => {
		if (bannerList.value[index].jump_url) {
			uni.navigateTo({
				url: bannerList.value[index].jump_url
			})
		}
	}
	
	const hanldeSwiper2 = (index) =>{
		if (bannerList2.value[index].jump_url) {
			uni.navigateTo({
				url: bannerList.value[index].jump_url
			})
		}
	}
	
	const hanldeSwiper3 = (index) =>{
		if (bannerList3.value[index].jump_url) {
			uni.navigateTo({
				url: bannerList.value[index].jump_url
			})
		}
	}

	onLoad(() => {
		getPageInfo();
		dataReportFun({
			event: "client.page_view",
		})
		util.friends();
	})

	// 分享
	onShareAppMessage(() => {
		return util.onShare({
			path: `/pages/index/index`
		})
	})

	onShareTimeline(() => {
		let uid = "";
		if (uni.getStorageSync('userId')) {
			uid = uni.getStorageSync('userId');
		}
		
		let imageUrl = uni.getStorageSync('shareCover');
		return {
			query: `uid=${uid}&ref=wxmini_user_share`,
			title: "心宇利家政",
			imageUrl: imageUrl
		}
	})
</script>

<style scoped lang=scss>
	.icon {
		width: 100rpx;
		height: 100rpx;
		border-radius: 20rpx;
	}

	.img-box {
		flex-wrap: wrap;
		/* 允许换行 */
	}

	.activity {
		width: 100%;
		height: 200rpx;
	}

	.image-home {
		width: 25%;
	}

	.tips {
		color: #8c8c8c;
	}

	.button-style {
		padding: 20rpx 50rpx;
	}

	:deep(.u-notice__content__text > text) {
		white-space: nowrap !important;
	}

	.city {
		display: block;
		width: 30rpx;
		height: 30rpx;
	}

	.page-box {
		background: linear-gradient(180deg, #ECF5FF 0%, #FFFFFF 100%);
	}

	.list {
		width: 142rpx;
		/* height: 260rpx; */
		margin-bottom: 20rpx;
	}

	.list-image {
		display: block;
		width: 100%;
		height: 260rpx;
	}

	.notice-box {
		background: #E9F1FF;
		border-radius: 40rpx;
		overflow: hidden;
		padding: 0 30rpx;
		color: #0055FE;
	}

	.notice-bg {
		width: 600rpx;
		height: 420rpx;
		display: block;
		background: #FFFFFF;
		background-size: 100% 100%;
		border-radius: 20rpx;
	}
</style>